<template>
  <div class="fourupandhouse">
    <div class="common-tab-box">
      <div :class="{ active: tab === 1 }" @click="tab = 1">四上企业</div>
      <div :class="{ active: tab === 2 }" @click="tab = 2">房地产</div>
    </div>
    <div class="fourup" v-show="tab === 1">
      <div class="topcount">
        <div class="countitem">
          <div class="leftimg"></div>
          <div class="rightcountinfor">
            <p class="righttitle">四上企业总数</p>
            <p class="bottomnum"><b>{{topInfor.ssqygs}}</b>个</p>
          </div>
        </div>
        <div class="countitem">
          <div class="leftimg leftimg2"></div>
          <div class="rightcountinfor">
            <p class="righttitle">同比增加</p>
            <p class="bottomnum"><b>{{topInfor.tbzj}}</b>个</p>
          </div>
        </div>
      </div>
      <div class="bottomchart">
        <div class="mychart" ref="myChart"></div>
      </div>
    </div>
    <div class="house" v-show="tab === 2">
      <div class="item" v-for="(item, index) in houseList" :key="index">
        <div class="left">
          <div class="lefticon" :class="'lefticon' + index"></div>
          <div class="lefttext">
            <p class="leftname">{{item.xmmc}}</p>
            <p><b>{{item.sl}}</b>{{item.dw}}</p>
          </div>
        </div>
        <div class="right">
          <p class="percent" :class="{greenpercent:item.tb<0}">{{item.tb}}%</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getAction } from '@/api/manage.js'

export default {
  data() {
    return {
      tab: 1,
      myChart: null,
      chartData: [],
      topInfor: {},
      houseList: []
    }
  },
  watch: {
    tab() {
      this.getData()
      this.getChartData()
    }
  },
  mounted() {
    this.getData()
    this.getChartData()
  },
  methods: {
    getData() {
      getAction('/topic/data/listAllBySql/dy_app_xxzb_ssqy').then(res => {
        if (res.result && res.result.length > 0) {
          this.topInfor = res.result[0]
        }
      })
      getAction('/topic/data/listAllBySql/dy_app_xxzb_fdcqk').then(res => {
        if (res.result && res.result.length > 0) {
          this.houseList = res.result
        }
      })
    },
    getChartData() {
      getAction('/topic/data/listAllBySql/dy_app_xxzb_ssqy_fhy').then(res => {
        if (res.result && res.result.length > 0) {
          this.chartData = res.result
          this.initChart()
        }
      })
    },
    initChart() {
      if (!this.myChart) {
        this.myChart = echarts.init(this.$refs.myChart)
      }
      let xAxisData = []
      let yAxisData = []
      this.chartData.forEach((item) => {
        xAxisData.push(item.ssqylx)
        yAxisData.push(item.sl)
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          show: true,
          x: 'center', // 设置图例水平位置为居中
          y: 'top', // 设置图例垂直位置为底部
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: '20%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#1E4469'
              }
            },
            axisLabel: {
              interval: 0,
              margin: 10,
              textStyle: {
                fontSize: 14,
                color: '#e1e1e1'
              },
              formatter: function (params) {
                if (params && params.length > 3) {
                  return params.substring(0, 3) + '\n' + params.substring(3)
                } else {
                  return params
                }
              }

              // rotate: '45',
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：户',
            nameTextStyle: {
              // 轴标题，在xAxis或yAxis根下
              color: '#e1e1e1',
              fontSize: 12
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                fontSize: 12,
                color: '#e1e1e1'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#1E4469'
              }
            },
            splitLine: {
              lineStyle: {
                type: 'solid',
                color: '#1E4469'
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '12',
            data: yAxisData,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, // 前四个参数定义了渐变色的起止位置
                  [
                    { offset: 0, color: '#49D5FF' }, // 渐变开始的颜色和位置
                    { offset: 1, color: '#548FDA' } // 渐变结束的颜色和位置 // 渐变结束的颜色和位置
                  ]
                )
              }
            }
          }
        ]
      }
      this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.fourup {
  width: 100%;
  height: 100%;
  .topcount {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .countitem {
      width: 40%;
      display: flex;
      align-items: center;
      &:first-child {
        margin-right: 20px;
      }
      .leftimg {
        width: 51px;
        height: 48px;
        margin-right: 5px;
        background: url("../images/fourupicon1.png") no-repeat center;
        background-size: 100% 100%;
        &.leftimg2 {
          background: url("../images/fourupicon2.png") no-repeat center;
          background-size: 100% 100%;
        }
      }
      .rightcountinfor {
        width: 120px;
        font-family: MicrosoftYaHeiUI;
        font-size: 16px;
        color: #ffffff;
        line-height: 26px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        .righttitle {
          width: 100%;
          background: url("../images/fouruptitlebg.png") no-repeat -15px bottom;
          background-size: 91px 10px;
        }
        .bottomnum {
          b {
            margin-right: 4px;
            font-family: YouSheBiaoTiHei;
            font-size: 24px;
            color: #ffde00;
            line-height: 1.5;
          }
        }
      }
    }
  }
  .bottomchart {
    width: 100%;
    height: 150px;
    .mychart {
      width: 100%;
      height: 100%;
    }
  }
}
.house {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .item {
    width: 411px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 30px;
    background: url("../images/depositsAndLoans-bg.png") no-repeat center bottom;
    background-size: 100% 78px;
    .left {
      display: flex;
      align-items: center;
      .lefticon {
        width: 103px;
        height: 86px;
        &.lefticon0 {
          background: url("../images/houseicon1.png") no-repeat center;
          background-size: 100% 100%;
        }
        &.lefticon1 {
          background: url("../images/houseicon2.png") no-repeat center;
          background-size: 100% 100%;
        }
      }
      .lefttext {
        width: 180px;
        p {
          font-family: MicrosoftYaHeiUI;
          font-size: 16px;
          color: #ffffff;
          text-align: left;
          font-style: normal;
          text-transform: none;
          b {
            font-family: YouSheBiaoTiHei;
            font-size: 24px;
            color: #ffde00;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
      }
    }
    .right {
      width: 100px;
      font-family: MicrosoftYaHeiUI;
      font-size: 14px;
      color: #fffffe;
      line-height: 25px;
      margin-left: 20px;
      margin-top: 25px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      b {
        font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
        font-weight: bold;
        font-size: 18px;
        color: #ffde00;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .percent {
        height: 32px;
        line-height: 32px;
        color: #ff3e3e;
        padding-left: 10px;
        font-size: 18px;
        font-weight: bold;
        box-sizing: border-box;
        position: relative;
        &::before {
          content: "";
          width: 8px;
          height: 12px;
          background: url("../images/up-arrow.png") no-repeat;
          background-size: 100% 100%;
          position: absolute;
          left: 0;
          top: 50%;
          margin-top: -5px;
        }
        &.greenpercent{
          color: #18c624;
          &::before {
            content: "";
            width: 8px;
            height: 12px;
            background: url("../images/down-arrow.png") no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -5px;
          }
        }
      }
    }
  }
}
</style>
